<template>
  <div id="filter-bar">
    <div class="filter-item" v-for="filter in filters" :key="filter.name">
      <div class="filter-name">{{ filter.name }}</div>
      <el-dropdown @command="handelCommand">
        <span class="el-dropdown-link">
          {{ filter.selected }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in filter.items"
            :key="item"
            :command="{ name: filter.name, item: item }"
            >{{ item }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="filter-item">
      <div class="filter-name">价格</div>
      <el-popover
        trigger="hover"
        placement="bottom"
        v-model="visible"
        :width="300"
      >
        <div class="price-select-box">
          <el-input
            placeholder="最低价格"
            min="0"
            v-model="minprice"
            type="number"
            class="price-input"
            size="small"
            ><template slot="prepend">最低价</template>
            <template slot="append">ETH</template></el-input
          >
          <el-input
            placeholder="最高价格"
            :min="minprice"
            type="number"
            v-model="maxprice"
            class="price-input"
            size="small"
            ><template slot="prepend">最高价</template>
            <template slot="append">ETH</template></el-input
          >
          <el-button
            type="primary"
            size="small"
            class="price-btn"
            @click="setPriceRange"
            >应用</el-button
          >
        </div>

        <span slot="reference"
          ><span class="filter-price" type="primary">筛选</span
          ><i class="el-icon-arrow-down el-icon--right"></i
        ></span>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import web3 from 'web3'
export default {
  name: "FilterBar",
  data() {
    return {
      filters: [
        { name: "类型", items: ["所有", "图片", "视频"], selected: "所有" },
        {
          name: "售卖形式",
          items: ["所有", "定价出售", "拍卖"],
          selected: "所有",
        },
        // { name:"拍卖场次", items:[1,2,3],selected:1}
      ],

      // 最高价和最低价
      minprice: "0",
      maxprice: "0",

      // 分类
      classify: "所有",
      form_of_sale: "所有",

      visible: false,

      pageIndex: 1,
    };
  },

  computed: {
    ...mapState({
      filterOptions: (store) => store.home.filterOptions,
    }),
  },

  methods: {
    handelCommand(command) {
      if (command.name == "类型") {
        this.filters[0].selected = command.item;
        this.classify = command.item;
      } else if (command.name == "售卖形式") {
        this.filters[1].selected = command.item;
        this.form_of_sale = command.item;
      }
      let { classify, form_of_sale } = this;
      this.$emit("queryData", {
        ...this.filterOptions,
        pageIndex: "1",
        classify,
        form_of_sale,
      });
    },

    // 设置价格区间
    setPriceRange() {
      this.$emit("queryData", {
        ...this.filterOptions,
        classify: this.classify,
        pageIndex: "1",
        form_of_sale: this.form_of_sale,
        minprice: web3.utils.toWei(this.minprice),
        maxprice: web3.utils.toWei(this.maxprice),
      });
    },
  },
};
</script>

<style lang='less'>
.el-dropdown-link {
  cursor: pointer;
  color: var(--themeColor1);
  margin-left: 10px;
  font-size: 16px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-dropdown-menu__item:hover {
  background: #fff !important;
  color: var(--themeColor1) !important;
}
.el-icon-arrow-down {
  color: var(--themeColor1);
}
#filter-bar {
  margin: 0 auto;
  display: flex;
  margin-top: 20px;
  margin-bottom: 15px;
  justify-content: center;
  .filter-item {
    display: flex;
    margin-left: 20px;
    position: relative;
    align-items: center;
    .filter-name {
      font-size: 16px;
    }
    .filter-price {
      margin-left: 10px;
      color: var(--themeColor1);
      cursor: pointer;
      font-size: 16px;
    }
  }
}
.price-select-box {
  // display: flex;
  // align-items: center;
  .price-input {
    margin-bottom: 10px;
  }
}
</style>